<template>
  <div class="unit-dialog">
    <el-dialog :visible.sync="visible">
      <div class="panelWrap unit-container">
        <div class="title flex flexac flexjcsb fs14 cfff fwb pl p-r-20">
          <div>新增使用单位</div>
          <i class="el-icon-close" @click="handleCloseDialog" />
        </div>
        <div class="con flexcenter flexdc ibk">
          <div class="con-row flex flexdc flexac pl">
            <div class="marginAuto flex flexac">
              <div class="inputLable inputLable1 flex flexac">
                <span class="name texttr"><span class="mustval">*</span>使用单位名称：</span>
                <el-input v-model="form.name" class="input" placeholder="请输入使用单位名称" />
              </div>
            </div>
            <div class="marginAuto flex flexac m-t-20">
              <div class="inputLable inputLable1 flex flexac">
                <span class="name texttr"><span class="mustval">*</span>使用单位简称：</span>
                <el-input v-model="form.nameSimple" class="input" placeholder="请输入使用单位简称" />
              </div>
            </div>
          </div>
          <div class="flex setCodestr">
            <el-button class="set-input" type="success" @click="setCodestr()">该使用单位无社会统一信用代码</el-button>
          </div>
          <!-- <div class="con-row flex flexac pl ">
          <div class="inputLable inputLable2 flex flexac">
            <span class="name texttr"><span class="mustval">*</span>性别：</span>
            <div class="flex">
              <el-radio v-model="radio" label="1">男</el-radio>
              <el-radio v-model="radio" label="2">女</el-radio>
            </div>
          </div>
        </div> -->
          <!-- <div class="con-row flex flexac pl ">
          <div class="inputLable inputLable1 flex flexac  ">
            <span class="name texttr"><span class="mustval">*</span>证件类型：</span>
            <el-select v-model="maintenanPerson.certificateVal" placeholder="请选择证件类型">
              <el-option v-for="item in maintenanPerson.certificate" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div> -->
          <div class="con-row flex flexac pl ">
            <div class="inputLable inputLable2 flex flexac ">
              <span class="name texttr"><span class="mustval">*</span>统一社会信用代码：</span>
              <el-input v-model="form.socialCreditCode" class="input" placeholder="请输入统一社会信用代码" />
            </div>
          </div>
          <!-- <div class="con-row flex flexac pl">
            <div class="marginAuto flex flexac">
              <div class="inputLable inputLable1 flex flexac">
                <span class="name texttr"><span class="mustval">*</span>营业执照代码：</span>
                <el-input v-model="form.businessLicenseCode" class="input" placeholder="请输入营业执照代码" />
              </div>
            </div>
          </div> -->
          <div class="con-row flex flexac pl ">
            <div class="inputLable inputLable2 flex flexac ">
              <span class="name texttr"><span class="mustval">*</span>负责人：</span>
              <el-input v-model="form.chargePerson" class="input" placeholder="请输入负责人" />
            </div>
          </div>
          <div class="con-row flex flexac pl ">
            <div class="inputLable inputLable2 flex flexac ">
              <span class="name texttr"><span class="mustval">*</span>负责人联系电话：</span>
              <el-input v-model="form.chargePersonPhone" class="input" placeholder="请输入负责人联系电话" />
            </div>
          </div>

          <div class="con-row flex flexac pl ">
            <div class="inputLable inputLable2 flex flexac ">
              <span class="name texttr"><span class="mustval">*</span>安全员：</span>
              <el-input v-model="form.securityPerson" class="input" placeholder="请输入安全员" />
            </div>
          </div>
          <div class="con-row flex flexac pl ">
            <div class="inputLable inputLable2 flex flexac ">
              <span class="name texttr"><span class="mustval">*</span>安全员联系电话：</span>
              <el-input v-model="form.securityPersonPhone" class="input" placeholder="请输入安全员联系电话" />
            </div>
          </div>

        </div>

        <div class="flex flexcenter m-b-40 m-t-35">
          <el-button v-if="!isEdit" class="saveBtn btn m-r-30 el-icon-circle-check" @click="handleSave(0)">保 存</el-button>
          <el-button v-else type="success" class="btn m-r-30 el-icon-circle-check" @click="handleSave(1)">更 新</el-button>
          <el-button class="clsoeBtn btn el-icon-circle-close" @click="handleCloseDialog">关 闭</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import { createUseUnitAdd, useUnitUpdate } from '@/api/elevator/elevatoruseunit'

import { showNotice, randomString } from '@/utils/toolclass'
// import uploadImg from '@/components/uploadImg'
// import city from '@/components/city'

export default {
  name: 'UnitSelectDialog',
  // components: {
  //   uploadImg, city
  // },
  props: {
    data: {
      type: Object,
      default: () => ({})
    },
    isEdit: {
      type: Boolean
    },
    value: {
      type: Boolean
    }
  },
  data() {
    return {
      visible: false,
      form: { ...this.data },
      formOrigin: {
        id: 0,
        name: '',
        nameSimple: '',
        socialCreditCode: '',
        chargePerson: '',
        businessLicenseCode: '',
        chargePersonPhone: '',
        securityPerson: '',
        securityPersonPhone: '',
        remark: '',
        version: ''
      },
      codechange: false

    }
  },
  computed: {
    // getName: function() {
    //   return this.form.name
    // }
  },
  watch: {
    visible(v) {
      this.$emit('input', v)
    },
    value(v) {
      this.visible = v
    },
    data(v) {
      if (v.id === 0) {
        this.form = { ...this.formOrigin }
      } else {
        this.form = { ...v }
      }
    }
    // getName: {
    //   handler(val, oldVal) {
    //     // console.log(val, oldVal)
    //     this.form.nameSimple = this.form.name
    //   },
    //   immediate: true
    // }
  },
  created() {},
  mounted() {},
  methods: {
    setCodestr() {
      const code = ('0000' + randomString(14)).toLocaleUpperCase()
      // console.log(code)

      this.form.socialCreditCode = code
      if (this.codechange) {
        this.form.socialCreditCode = ''
      }
      this.codechange = !this.codechange
    },
    handleUpdate(data) {
      useUnitUpdate(data).then((res) => {
        if (res.code === '000000') {
          showNotice('success', '提示', '更新成功')
          this.$emit('handleRefresh')
          this.$emit('handleCloseDialog')
        } else {
          if (res.msg === '失败') {
            showNotice('error', '提示', `更新${res.msg}`)
          } else {
            if (res.code === '111111') {
              showNotice('error', '提示', '备案未完成，无法使用本模块，请先完成备案')
            } else {
              // showNotice('error', '提示', res.msg)
            }
          }
        }
      })
    },

    handleSave(type) {
      if (!(/^\S+$/.test(this.form.name))) {
        showNotice('error', '提示', '使用单位名称不能为空')
        return
      }

      if (!(/^\S+$/.test(this.form.nameSimple))) {
        showNotice('error', '提示', '使用单位简称不能为空')
        return
      }

      if (!(/^\S+$/.test(this.form.socialCreditCode))) {
        showNotice('error', '提示', '统一社会信用代码不能为空')
        return
      }

      if (this.form.socialCreditCode.length !== 18) {
        showNotice('error', '提示', '统一社会信用代码必须为18位')
        return
      }

      // if (!(/^\S+$/.test(this.form.businessLicenseCode))) {
      //   showNotice('error', '提示', '营业执照代码不能为空')
      //   return
      // }

      if (!(/^\S+$/.test(this.form.chargePerson))) {
        showNotice('error', '提示', '负责人不能为空')
        return
      }

      if (!(/^\S+$/.test(this.form.chargePersonPhone))) {
        showNotice('error', '提示', '请输入负责人手机号码')
        return
      } else if (!(/^1[3456789]\d{9}$/.test(this.form.chargePersonPhone))) {
        showNotice('error', '提示', '负责人手机号码格式不对')
        return
      }

      if (!(/^\S+$/.test(this.form.securityPersonPhone))) {
        showNotice('error', '提示', '请输入安全员手机号码')
        return
      } else if (!(/^1[3456789]\d{9}$/.test(this.form.securityPersonPhone))) {
        showNotice('error', '提示', '安全员手机号码格式不对')
        return
      }

      const params = {
        businessLicenseCode: this.form.businessLicenseCode,
        chargePerson: this.form.chargePerson,
        chargePersonPhone: this.form.chargePersonPhone,
        id: this.form.id,
        name: this.form.name,
        nameSimple: this.form.nameSimple,
        remark: this.form.remark,
        securityPerson: this.form.securityPerson,
        securityPersonPhone: this.form.securityPersonPhone,
        socialCreditCode: this.form.socialCreditCode,
        version: this.form.version ? this.form.version : 1
      }
      // console.log(params)

      if (type === 0) {
        this.handleAdd(params)
      } else {
        this.handleUpdate(params)
      }
    },
    handleCloseDialog() {
      this.$emit('handleCloseDialog')
    },
    handleAdd(data) {
      createUseUnitAdd(data).then((res) => {
        if (res.code === '000000') {
          showNotice('success', '提示', '保存成功!')
          this.$emit('handleRefresh')
          this.$emit('handleCloseDialog')
        } else {
          if (res.msg === '失败') {
            showNotice('error', '提示', `保存${res.msg}`)
          } else {
            if (res.code === '111111') {
              showNotice('error', '提示', '备案未完成，无法使用本模块，请先完成备案')
            } else {
              // // showNotice('error', '提示', res.msg)
            }
          }
        }
      })
    }
  }

}
</script>

<style rel='stylesheet/scss' lang='scss'>
@import "@/styles/addtable.scss";
@import "@/styles/public.scss";
.unit-dialog {
  .unit-container {
    width: 800px;
    background: #ffffff;
    margin-left: -200px;
    .con {
      margin-top: 30px;
      .con-row {
        padding: 15px 0px;
      }
      .setCodestr {
        margin-left: 120px;
        .set-input {
          width: 230px;
        }
      }
      .input {
        width: 300px;
        height: 36px;
      }
    }
    .inputLable input {
      width: 450px;
    }
    .inputLable .name {
      width: 190px !important;
      padding-right: 20px;
    }
  }
}
</style>
